<template>
  <div>
   <div class="navbar">
     <main-navbar></main-navbar>
   </div>
   <div class="main">
      <div class="message_list" ref="message_list">
        <message-list></message-list>
      </div>
   </div>
  </div>
</template>

<script>
import mainNavbar from '../main/main-navbar'
import messageList from './message-list'

export default {
  components: {
    mainNavbar,
    messageList
  },
  mounted() {
    // window.onresize = this.changeMargin();
    window.addEventListener("resize",  this.changeMargin , false)
    this.changeMargin()
  },
  data() {
    return {
      style_str: "",
    };
  },
  methods: {
    changeMargin(){
      var docWidth = document.body.clientWidth;
      // console.log("检测到页面大小发生变化", docWidth)
      // 动态修改 组件 的css样式
      if(docWidth <= 1400 && this.style_str !== "small"){
        this.style_str = 'small';
        console.log("修改为 小 格式")
        this.changeSmallStyle();
      }else if(docWidth > 1400 && this.style_str !== "big"){
        this.style_str = 'big';
        console.log("修改为 大 格式")
        this.changeBigStyle()
      }
    },
    changeBigStyle(){
      this.$refs.message_list.style.width = '1140px'
    },
    changeSmallStyle(){
      this.$refs.message_list.style.width = '980px'
    },
    
  },
};
</script>

<style>
.navbar{
  /* padding: 0px 30px; */
  min-width: 980px;
}
.main{
  
  position: absolute;
  top: 60px;
  bottom: 0px;
  min-width: 980px;

  /* padding: 0px 60px; */
  /* left: 60px;
  right: 60px; */
  /* min-width: 980px; */
  /* width: 70%;
  margin: 0px 15%; */
  width: 100%;
  /* background: rgb(226, 180, 180); */
}
/** 绝对-相对-绝对：https://www.cnblogs.com/goloving/p/9275776.html */
.message_list{
  position: relative;
  width: 980px;
  height: 100%;
  margin: 0 auto;
  /* min-width: 980px;  */
}
</style>